<template>
	<satri-page :padding="20">
		<!-- 尺寸示例 -->
		<satri-card label="尺寸">
			<satri-icon name="like"></satri-icon>
			<satri-icon name="like" :size="40"></satri-icon>
			<satri-icon name="like" :size="50"></satri-icon>
		</satri-card>

		<!-- 颜色示例 -->
		<satri-card label="颜色">
			<satri-icon name="like" color="primary"></satri-icon>
			<satri-icon name="like" color="error"></satri-icon>
			<satri-icon name="like" color="success"></satri-icon>
		</satri-card>

		<!-- 方向示例 -->
		<satri-card label="方向">
			<satri-grid :column="4">
				<satri-grid-item v-for="item in arrow" :key="item">
					<view class="item" @tap="copy(item)">
						<satri-icon :name="item" :size="44"></satri-icon>
						<satri-text :value="item" align="center" :margin="[15, 10, 0, 10]" />
					</view>
				</satri-grid-item>
			</satri-grid>
		</satri-card>

		<!-- 操作示例 -->
		<satri-card label="操作">
			<satri-grid :column="4">
				<satri-grid-item v-for="item in op" :key="item">
					<view class="item" @tap="copy(item)">
						<satri-icon :name="item" :size="44"></satri-icon>
						<satri-text :value="item" align="center" :margin="[15, 10, 0, 10]" />
					</view>
				</satri-grid-item>
			</satri-grid>
		</satri-card>

		<!-- 展示示例 -->
		<satri-card label="展示">
			<satri-grid :column="4">
				<satri-grid-item v-for="item in dis" :key="item">
					<view class="item" @tap="copy(item)">
						<satri-icon :name="item" :size="44"></satri-icon>
						<satri-text :value="item" align="center" :margin="[15, 10, 0, 10]" />
					</view>
				</satri-grid-item>
			</satri-grid>
		</satri-card>

		<!-- 圆形示例 -->
		<satri-card label="圆形">
			<satri-grid :column="4">
				<satri-grid-item v-for="item in circular" :key="item">
					<view class="item" @tap="copy(item)">
						<satri-icon :name="item" :size="44"></satri-icon>
						<satri-text :value="item" align="center" :margin="[15, 10, 0, 10]" />
					</view>
				</satri-grid-item>
			</satri-grid>
		</satri-card>

		<!-- 其他示例 -->
		<satri-card label="其他">
			<satri-grid :column="4">
				<satri-grid-item v-for="item in list" :key="item">
					<view class="item" @tap="copy(item)">
						<satri-icon :name="item" :size="44"></satri-icon>
						<satri-text :value="item" align="center" :margin="[15, 10, 0, 10]" />
					</view>
				</satri-grid-item>
			</satri-grid>
		</satri-card>
	</satri-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";

	// 方向图标列表
	const arrow = ref([
		"top",
		"back-top",
		"upgrade",
		"back",
		"enter",
		"arrow-double-left",
		"arrow-double-right",
		"arrow-bottom",
		"arrow-top",
		"arrow-left",
		"arrow-right",
		"caret-bottom",
		"caret-top",
	]);

	// 操作图标列表
	const op = ref([
		"plus",
		"minus",
		"plus-border",
		"minus-border",
		"enlarge",
		"shrink",
		"check",
		"close",
		"success-fill",
		"delete-fill",
		"toast-success",
		"toast-error",
		"cloud-download",
		"cloud-upload",
		"delete",
		"stop",
	]);

	// 展示图标列表
	const dis = ref([
		"meh",
		"meh-fill",
		"cry",
		"cry-fill",
		"smile",
		"smile-fill",
		"like",
		"like-fill",
		"location",
		"location-fill",
		"notification",
		"notification-fill",
		"eye-open",
		"eye-close",
		"favor-fill",
		"good-fill",
	]);

	// 圆形图标列表
	const circular = ref([
		"chart-pie",
		"play",
		"more",
		"keyboard-9",
		"keyboard-26",
		"time",
		"refresh",
		"check-border",
		"close-border",
		"help-border",
		"warning-border",
		"toast-waiting",
		"clock-fill",
		"help-fill",
		"prompt-fill",
	]);

	// 其他图标列表
	const list = ref([
		"exit",
		"qrcode",
		"msg",
		"app",
		"payment",
		"face-auth",
		"folder",
		"bill",
		"phone",
		"share",
		"link",
		"rise",
		"decline",
		"active",
		"cropper",
		"fullscreen",
		"chart-bar",
		"set",
		"map",
		"calendar",
		"customer-service",
		"edit",
		"scan",
		"pay",
		"image",
		"search",
		"toast-warning",
		"history-fill",
		"amount-fill",
		"wallet-fill",
		"doc-fill",
		"camera-fill",
		"mail-fill",
		"bank-card-fill",
		"relay-fill",
		"comment-fill",
	]);

	// 复制图标名称到剪贴板
	function copy(name : string) {
		uni.setClipboardData({ data: name });
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 150rpx;
		padding-top: 20rpx;
		/* 设置每个图标项的顶部内边距 */
	}
</style>